<template>
    <div class="camera-container">
        <button v-if="isShowTakePhoto"
                :style="{backgroundImage: 'url(' + backgroundImage + ')', display: 'block', margin: '0 auto', width: '60px', height: '60px'}"
                @click="clickedShoot"/>
        <button v-else
                :style="{backgroundImage: 'url(' + unBackgroundImage + ')', display: 'block', margin: '0 auto', width: '60px', height: '60px'}"
                @click="clickedStopShoot"/>
    </div>
</template>

<script>
	import bg from '@/assets/images/camera_shoot_btn.png'
	import unBg from '@/assets/images/end_record_icon.png'

	export default {
		name: 'CameraControlShootView',
		props: {
			isShowTakePhoto: {
				required: true,
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				backgroundImage: bg,
				unBackgroundImage: unBg
			}
		},
		methods: {
			clickedShoot(e) {
				console.log('点击')
				this.$emit('shoot-action', e)
			},
			clickedStopShoot(e) {
				console.log('点击')
				this.$emit('stop-action', e)
			}
		}
	}
</script>

<style scoped lang="scss">

    .camera-container {
        width: 300px;
        height: 60px;

        button {
            text-align: center;
            background-color: rgba(0, 0, 0, 0);
            border: 0 solid rgba(0, 0, 0, 0);
        }
    }

</style>
